<template>
  <a-layout-sider width="235" style="background-color: #f5f5f5;text-align: left;">
    <div v-for="group in groups" :key="'group_' + group.key">
      <h2 class="side-title">{{ group.name }}</h2>
      <div class="side-tags">
        <a-space :size="[0, 10]" wrap>
          <a-checkable-tag v-for="tag in group.items" :key="'tag_'+group.key+'_'+tag.key" :checked="checkTag(tag, group)" @change="checked => handleChange(tag, group, checked)">
            {{ tag.tag }}
          </a-checkable-tag>
        </a-space>
      </div>
    </div>
  </a-layout-sider>
</template>
<script>
import { listFilters }  from '@/static/config.js'
export default {
  computed: {
    groups() {
      console.log(listFilters)
      return listFilters
    }
  },

  methods: {
    checkTag(tag, group) { 
      return group.selected === tag.key
    },
    handleChange(tag, group, checked) {
      console.log(tag)
      console.log(group)
      console.log(checked)
      if (checked) {
        group.selected = tag.key
      }
    }
  }
}
</script>
<style lang="less" scoped>
.side-title {
  font-size: 16px;
  font-weight: bold;
  margin: 26px 16px 0 16px;
}
.side-tags {
  margin: 16px 16px 16px 10px;
}
</style>